<template>
	<view class="pic_list">
		<view v-for="(item, key) in picList" :key="key" class="pic_wrap">
			<view class="pic">
				<image :src="item" mode="widthFix" @click="previewImage(key)"/>
			</view>
			<view class="del iconfont icon-delete-filling" @click="handleDel(key)"/>
		</view>
		<view class="upload_wrap">
			<image :src="uploadImagePic" mode="widthFix" class="upload" @click="uploadImage"/>
		</view>
	</view>
</template>

<script setup name="MyUploadImage">
import { upload } from '@/api/common'
import uploadImagePic from '@/static/images/upload_image.png'
import { defineProps, ref, defineExpose } from 'vue'
const baseUrl = ref(import.meta.env.VITE_APP_PIC_API)
const props = defineProps({
		list: {
			type: Array,
			default: () => {
				return []
			}
		}
})
const uploadList = ref([])
const picList = ref([])
function handleDel(key) {
	console.log(key)
	uploadList.value.splice(key, 1)
	picList.value.splice(key, 1)
}

function previewImage(key) {
	uni.previewImage({
		current: key,     // 当前显示图片的索引值
		urls: picList.value,    // 需要预览的图片列表，photoList要求必须是数组
		loop:false,          // 是否可循环预览
	})
}

function uploadImage() {
	uni.chooseImage({
		count: 9, //默认9
		sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], //从相册选择
		success: function (res) {
			uni.showLoading({
					title: '正在上传...'
			})
			upload(res.tempFilePaths[0]).then(res => {
				uploadList.value.push(res.fileName)
				picList.value.push(baseUrl.value  + res.fileName)
				console.log(uploadList)
				console.log(picList)
				uni.hideLoading()
			}).catch(() => {
				uni.hideLoading()
			})
		}
	})
}

function getPicList() {
	return uploadList.value
}
defineExpose({
	getPicList
})
</script>

<style lang="scss" scoped>
@import '@/static/styles/index.scss';
.pic_list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;
	.pic_wrap {
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		.pic {
			display: flex;
			flex-wrap: wrap;
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			justify-content: center;
			align-items: center;
		}
		.del {
			position: absolute;
			top: -15rpx;
			right: -15rpx;
			font-size: 40rpx;
			color: #606266;
		}
		image {
			width: 100%;
		}
	}
	.upload_wrap {
		width: 150rpx;
		height: 150rpx;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		border-radius: 10rpx;
		.upload {
			width: 100rpx;
		}
	}
}
</style>